<template>
  <div class="check-btn-group">
    <el-button type="success" @click="checkClick(1)">上班打卡</el-button>
    <el-button type="warning" @click="checkClick(2)">下班打卡</el-button>
    <!-- <el-button 
      :type="displayMode === 'simple' ? 'primary' : 'info'" 
      size="small"
      @click="toggleDisplayMode"
    >
      {{ displayMode === 'simple' ? '详细模式' : '简洁模式' }}
    </el-button> -->
  </div>
  <div class="stat-list-scroll">
    <div class="stat-list-flex">
      <div v-for="item in statList" :key="item.key" class="stat-card stat-card-inline stat-card-hover">
        <div class="stat-content">
          <div class="stat-title">{{ item.title }}</div>
          <div class="stat-value">{{ item.value }}</div>
        </div>
      </div>
    </div>
  </div>
  <ContentWrap>
    <el-calendar ref="calendar" v-model="currentDate" :key="calendarKey" first-day-of-week="1">
      <!-- 日历头部 -->
      <template #header="{ date }">
        <span>{{ date }}</span>
        <el-button-group>
          <el-button size="small" @click="selectDate('prev-month')">上一月</el-button>
          <el-button size="small" @click="selectDate('today')">本月</el-button>
          <el-button size="small" @click="selectDate('next-month')">下一月</el-button>
        </el-button-group>
      </template>
      <!-- 日历cell渲染，使用新的优化VO字段 -->
      <template #date-cell="{ data }">
        <div class="calendar-cell">
          <!-- 日期显示 -->
          <div class="date-number">{{ data.day.split('-').slice(1).join('-') }}</div>
          
                     <!-- 右上角标签 - 只显示周末/节假日/今天 -->
        <div class="top-right-tags">
          <el-tag 
            v-if="isToday(data.day)" 
            size="small" 
            type="success" 
            class="today-tag"
          >
            今天
          </el-tag>
          <el-tag 
            v-else-if="getRestDayTag(data.day)" 
            size="small" 
            :type="getRestDayTagType(data.day)"
            class="rest-tag"
          >
            {{ getRestDayText(data.day) }}
          </el-tag>
        </div>

          <!-- 中间内容区域 -->
          <div class="center-content">
            <div v-if="displayMode === 'detailed'" class="detail-container"> 
              <template v-for="item in dayDetailList" :key="item.date">
                <template v-if="data.day === item.date">
                  <!-- 全天出差 -->
                  <div v-if="item.businessTripApplication && !item.attendanceRecord" class="full-day-item business-trip">
                    <span class="full-day-text">出差</span>
                  </div>
                  
                  <!-- 全天缺勤 - 只在工作日显示 -->
                  <div v-if="!item.attendanceRecord && !item.leaveApplication && !item.businessTripApplication && !item.restDay" class="full-day-item absent">
                    <span class="full-day-text">缺勤</span>
                  </div>
                  
                  <!-- 全天请假 -->
                  <div v-if="item.leaveApplication && !item.attendanceRecord" class="full-day-item leave">
                    <span class="full-day-text">{{ item.leaveApplication.leaveName }}</span>
                    <el-tag v-if="item.leaveApplication.timeTypeDesc" size="small" type="info" class="time-type-tag">
                      {{ item.leaveApplication.timeTypeDesc }}
                    </el-tag>
                  </div>
                  
                  <!-- 考勤记录显示 -->
                  <div v-if="item.attendanceRecord" class="attendance-detail">
                    <div v-if="item.attendanceRecord.checkInTime || item.attendanceRecord.checkInStatus" class="time-line">
                      <span class="time-label">上班:</span>
                      <span class="time-value">{{ item.attendanceRecord.checkInTime ? formatToMinute(item.attendanceRecord.checkInTime) : '--' }}</span>
                      <el-tag 
                        size="small" 
                        :type="getStatusType(item.attendanceRecord.checkInStatus)"
                        class="status-tag"
                      >
                        {{ item.attendanceRecord.checkInStatus || '缺卡' }}
                      </el-tag>
                    </div>
                    <div v-else class="time-line">
                      <span class="time-label">上班:</span>
                      <span class="time-value">--</span>
                      <el-tag 
                        size="small" 
                        type="danger"
                        class="status-tag"
                      >
                        缺卡
                      </el-tag>
                    </div>
                    
                    <div v-if="item.attendanceRecord.checkOutTime || item.attendanceRecord.checkOutStatus" class="time-line">
                      <span class="time-label">下班:</span>
                      <span class="time-value">{{ item.attendanceRecord.checkOutTime ? formatToMinute(item.attendanceRecord.checkOutTime) : '--' }}</span>
                      <el-tag 
                        size="small" 
                        :type="getStatusType(item.attendanceRecord.checkOutStatus)"
                        class="status-tag"
                      >
                        {{ item.attendanceRecord.checkOutStatus || '缺卡' }}
                      </el-tag>
                    </div>
                    <div v-else class="time-line">
                      <span class="time-label">下班:</span>
                      <span class="time-value">--</span>
                      <el-tag 
                        size="small" 
                        type="danger"
                        class="status-tag"
                      >
                        缺卡
                      </el-tag>
                    </div>
                    
                    <!-- 半天考勤记录的状态标注 -->
                    <div v-if="isHalfDayAttendance(item)" class="half-day-status">
                      <el-tag 
                        size="small" 
                        :type="getHalfDayStatusType(item)"
                        class="half-day-tag"
                      >
                        {{ getHalfDayStatusText(item) }}
                      </el-tag>
                    </div>
                    
                    <!-- 考勤记录下的额外申请信息 -->
                    <div v-if="item.overtimeApplication" class="application-detail">
                      <div class="application-item">
                        <span class="application-text overtime-text">
                          加班 {{ item.overtimeApplication.overtimeHours }}h
                        </span>
                      </div>
                    </div>
                  </div>
                </template>
              </template>
            </div>
            
            <!-- 简洁模式下的简短信息 -->
            <div v-else-if="displayMode === 'simple'" class="simple-detail"> 
              <template v-for="item in dayDetailList" :key="item.date">
                <template v-if="data.day === item.date">
                  <!-- 全天状态显示 -->
                  <div v-if="item.businessTripApplication && !item.attendanceRecord" class="simple-full-day business-trip">
                    出差
                  </div>
                  <div v-else-if="!item.attendanceRecord && !item.leaveApplication && !item.businessTripApplication && !item.restDay && formatDate2(data.date) <= formatDate2(nowDate)" class="simple-full-day absent">
                    缺勤
                  </div>
                  <div v-else-if="item.overtimeApplication && !item.attendanceRecord" class="simple-full-day overtime">
                    加班 {{ item.overtimeApplication.overtimeHours }}h
                  </div>
                  <div v-if="item.leaveApplication" class="simple-full-day leave">
                    {{ item.leaveApplication.leaveName }}
                    <el-tag v-if="item.leaveApplication.timeTypeDesc" size="small" type="info" class="time-type-tag">
                      {{ item.leaveApplication.timeTypeDesc }}
                    </el-tag>
                  </div>
                  
                  <!-- 考勤时间显示 -->
                  <div v-if="item.attendanceRecord" class="simple-attendance">
                    <div>{{ item.attendanceRecord.checkInTime }}</div>
                    <div v-if="item.attendanceRecord.checkInTime || item.attendanceRecord.checkInStatus" class="simple-time">
                      <span class="simple-time-label">上班:</span>
                      <span class="simple-time-value">{{ item.attendanceRecord.checkInTime ? formatToMinute(item.attendanceRecord.checkInTime) : '--' }}</span>
                      <span class="simple-status" :class="getStatusClass(item.attendanceRecord.checkInStatus)">{{ item.attendanceRecord.checkInStatus || '缺卡' }}</span>
                    </div>
                    <div v-else class="simple-time">
                      <span class="simple-time-label">上班:</span>
                      <span class="simple-time-value">--</span>
                      <span class="simple-status absent-status">缺卡</span>
                    </div>
                    
                    <div v-if="item.attendanceRecord.checkOutTime || item.attendanceRecord.checkOutStatus" class="simple-time">
                      <span class="simple-time-label">下班:</span>
                      <span class="simple-time-value">{{ item.attendanceRecord.checkOutTime ? formatToMinute(item.attendanceRecord.checkOutTime) : '--' }}</span>
                      <span class="simple-status" :class="getStatusClass(item.attendanceRecord.checkOutStatus)">{{ item.attendanceRecord.checkOutStatus || '缺卡' }}</span>
                    </div>
                    <div v-else class="simple-time">
                      <span class="simple-time-label">下班:</span>
                      <span class="simple-time-value">--</span>
                      <span class="simple-status absent-status">缺卡</span>
                    </div>
                  </div>
                  
                  <!-- 半天考勤记录的状态标注 -->
                  <!-- <div v-if="isHalfDayAttendance(item)" class="simple-half-day-status">
                    <span class="simple-half-day-text">{{ getHalfDayStatusText(item) }}</span>
                  </div> -->
                  
                  <!-- 考勤记录下的加班信息显示 -->
                  <div v-if="item.attendanceRecord && item.overtimeApplication" class="simple-overtime">
                    加班 {{ item.overtimeApplication.overtimeHours }}h
                  </div>
                  
                  <!-- 请假记录下的加班信息显示 -->
                  <div v-if="item.leaveApplication && !item.attendanceRecord && item.overtimeApplication" class="simple-overtime">
                    加班 {{ item.overtimeApplication.overtimeHours }}h
                  </div>
                  <!-- <div v-if="!item.attendanceRecord && item.leaveApplication && item.mainTag !== item.leaveApplication.leaveName" class="simple-leave">
                    {{ item.leaveApplication.leaveName }}
                    <span class="simple-leave-duration">({{ item.leaveApplication.leaveNum }}{{ item.leaveApplication.leaveUnit }})</span>
                  </div> -->
                </template>
              </template>
            </div>
          </div>
        </div>
      </template>
    </el-calendar>
  </ContentWrap>
</template>
<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import { AttendanceDetailApi } from '@/api/oa/attendancedetail'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/store/modules/user'
import { formatDate as formatDate2 } from '@/utils/formatTime'

defineOptions({ name: 'AttendanceOwner' })

const userStore = useUserStore()

// 当前显示的日期，默认为今天
const currentDate = ref(new Date())
const nowDate = ref(new Date())

const calendar = ref()
const calendarKey = ref(0)

// 显示模式：simple-简洁模式，detailed-详细模式
const displayMode = ref('simple')

// 统计区绑定后端 summary 字段
const summarizeDetail = ref<Record<string, number | null>>({})
// 日历明细绑定后端 days 字段
const dayDetailList = ref<any[]>([])

// 获取考勤数据
const getList = async () => {
  const month = `${currentDate.value.getFullYear()}-${String(currentDate.value.getMonth() + 1).padStart(2, '0')}`
  const res = await AttendanceDetailApi.getAttendanceCalendar({ userId: userStore.user.id, month })
  if (res) {
    dayDetailList.value = res.days || []
    summarizeDetail.value = res.summary || {}
  }
}

// 选择日期
const selectDate = (val: string) => {
  if (!calendar.value) return
  calendar.value.selectDate(val)
  if (val === 'prev-month' || val === 'next-month' || val === 'today') {
    currentDate.value = new Date(currentDate.value.getFullYear(), currentDate.value.getMonth(), 1)
    // if (val === 'today') {
    //   currentDate.value = new Date()
    // }
    console.log('当前选择的日期：', currentDate.value)
    getList()
  }
}
const formatToMinute = (timeStr) => {
  // 假设输入格式总是 "HH:mm:ss"
  if (!timeStr) return ''
  const parts = timeStr.split(':')
  if (parts.length < 2) return timeStr
  return `${parts[0]}:${parts[1]}`
}
/** 打卡 */
const checkClick = async (type: number) => {
  try {
    const res = await AttendanceDetailApi.checkAttendance(type)
    if (!res.code) {
      ElMessage.success('打卡成功')
      await getList()
      calendarKey.value++ // 强制刷新日历
    } else {
      ElMessage.error('打卡失败')
    }
  } catch (e) {
    ElMessage.error('打卡失败')
  }
}

// 切换显示模式
const toggleDisplayMode = () => {
  displayMode.value = displayMode.value === 'simple' ? 'detailed' : 'simple'
}

// 统计区字段与后端VO完全一致
const statList = computed(() => [
  { key: 'shouldAttend', title: '应出勤(天)', value: formatDecimalValue(summarizeDetail.value?.shouldAttend) },
  { key: 'actualAttend', title: '实际出勤(天)', value: formatDecimalValue(summarizeDetail.value?.actualAttend) },
  { key: 'annualLeave', title: '年假(天)', value: formatDecimalValue(summarizeDetail.value?.annualLeave) },
  { key: 'adjustLeave', title: '调休(小时)', value: formatDecimalValue(summarizeDetail.value?.adjustLeave) },
  { key: 'personalLeave', title: '事假(天)', value: formatDecimalValue(summarizeDetail.value?.personalLeave) },
  { key: 'sickLeave', title: '病假(天)', value: formatDecimalValue(summarizeDetail.value?.sickLeave) },
  { key: 'bereavementLeave', title: '丧假(天)', value: formatDecimalValue(summarizeDetail.value?.bereavementLeave) },
  { key: 'maternityLeave', title: '产假(天)', value: formatDecimalValue(summarizeDetail.value?.maternityLeave) },
  { key: 'prenatalLeave', title: '产检假(天)', value: formatDecimalValue(summarizeDetail.value?.prenatalLeave) },
  { key: 'marriageLeave', title: '婚假(天)', value: formatDecimalValue(summarizeDetail.value?.marriageLeave) },
  { key: 'parentalLeave', title: '育儿假(天)', value: formatDecimalValue(summarizeDetail.value?.parentalLeave) },
  { key: 'travel', title: '出差(小时)', value: formatDecimalValue(summarizeDetail.value?.travel) },
  { key: 'overtime', title: '加班(小时)', value: formatDecimalValue(summarizeDetail.value?.overtime) },
])

/** 格式化小数显示 */
const formatDecimalValue = (value: any) => {
  if (value === null || value === undefined) return '0.00'
  const num = Number(value)
  return num.toFixed(2)
}

/** 判断是否为标签重复的日期 */
const isTagDuplicate = (item: any) => {
  // 如果主要标签与申请内容重复，则认为是重复
  if (item.mainTag) {
    if (item.overtimeApplication && item.mainTag === '加班') {
      return true
    }
    if (item.businessTripApplication && item.mainTag === '出差') {
      return true
    }
    if (item.cardReplacementApplication && item.mainTag === '补卡') {
      return true
    }
    if (item.leaveApplication && item.mainTag === item.leaveApplication.leaveName) {
      return true
    }
  }
  return false
}

/** 判断是否为半天考勤记录 */
const isHalfDayAttendance = (item: any) => {
  return item.attendanceRecord && item.attendanceRecord.checkInTime && item.attendanceRecord.checkOutTime && 
         item.attendanceRecord.checkInTime.split(':')[0] === item.attendanceRecord.checkOutTime.split(':')[0];
}

/** 获取半天考勤记录的状态类型 */
const getHalfDayStatusType = (item: any) => {
  if (item.attendanceRecord.checkInStatus === '正常' && item.attendanceRecord.checkOutStatus === '正常') {
    return 'success';
  } else if (item.attendanceRecord.checkInStatus === '迟到' && item.attendanceRecord.checkOutStatus === '正常') {
    return 'warning';
  } else if (item.attendanceRecord.checkInStatus === '正常' && item.attendanceRecord.checkOutStatus === '迟到') {
    return 'danger';
  } else {
    return 'info';
  }
}

/** 获取半天考勤记录的状态文本 */
const getHalfDayStatusText = (item: any) => {
  if (item.attendanceRecord.checkInStatus === '正常' && item.attendanceRecord.checkOutStatus === '正常') {
    return '正常';
  } else if (item.attendanceRecord.checkInStatus === '迟到' && item.attendanceRecord.checkOutStatus === '正常') {
    return '迟到';
  } else if (item.attendanceRecord.checkInStatus === '正常' && item.attendanceRecord.checkOutStatus === '迟到') {
    return '早退';
  } else {
    return '异常';
  }
}

/** 判断是否为今天 */
const isToday = (date: string) => {
  const today = new Date();
  const currentDate = new Date(date);
  return currentDate.toDateString() === today.toDateString();
};

/** 判断是否显示休息日标签 */
const getRestDayTag = (date: string) => {
  const dayDetail = dayDetailList.value.find(item => item.date === date);
  return dayDetail?.restDay === true;
};

/** 获取休息日标签类型 */
const getRestDayTagType = (date: string) => {
  const dayDetail = dayDetailList.value.find(item => item.date === date);
  if (dayDetail?.restType === '节假日') {
    return 'warning';
  } else if (dayDetail?.restType === '周末') {
    return 'info';
  } else if (dayDetail?.restType === '补班') {
    return 'success';
  }
  return 'info';
};

/** 获取休息日显示文本 */
const getRestDayText = (date: string) => {
  const dayDetail = dayDetailList.value.find(item => item.date === date);
  if (dayDetail?.holidayName) {
    return dayDetail.holidayName;
  }
  return dayDetail?.restType || '休息日';
};

/** 获取考勤状态类型 */
const getStatusType = (status: string) => {
  switch (status) {
    case '正常':
      return 'success';
    case '迟到':
      return 'warning';
    case '早退':
      return 'danger';
    case '缺勤':
      return 'danger';
    case '补卡':
      return 'info';
    default:
      return 'info';
  }
};

/** 获取考勤状态样式类 */
const getStatusClass = (status: string) => {
  switch (status) {
    case '正常':
      return 'success-status';
    case '迟到':
      return 'warning-status';
    case '早退':
      return 'danger-status';
    case '缺勤':
      return 'danger-status';
    case '补卡':
      return 'info-status';
    default:
      return 'absent-status';
  }
};

onMounted(() => {
  currentDate.value = new Date()
  getList()
  
  // 强制设置非当前月的灰色效果
  setTimeout(() => {
    const calendarTable = document.querySelector('.el-calendar-table')
    if (calendarTable) {
      const prevCells = calendarTable.querySelectorAll('.prev')
      const nextCells = calendarTable.querySelectorAll('.next')
      
      // 设置上个月日期为灰色
      prevCells.forEach(cell => {
        const htmlCell = cell as HTMLElement
        htmlCell.style.setProperty('color', '#c0c4cc', 'important')
        
        // 设置所有子元素为灰色
        const allElements = cell.querySelectorAll('*')
        allElements.forEach(el => {
          const htmlEl = el as HTMLElement
          htmlEl.style.setProperty('color', '#c0c4cc', 'important')
        })
      })
      
      // 设置下个月日期为灰色
      nextCells.forEach(cell => {
        const htmlCell = cell as HTMLElement
        htmlCell.style.setProperty('color', '#c0c4cc', 'important')
        
        // 设置所有子元素为灰色
        const allElements = cell.querySelectorAll('*')
        allElements.forEach(el => {
          const htmlEl = el as HTMLElement
          htmlEl.style.setProperty('color', '#c0c4cc', 'important')
        })
      })
    }
  }, 300)
})
</script>

<style scoped>
.stat-card {
  min-width: 120px;
  margin-bottom: 16px;
  text-align: center;
}

.stat-content {
  text-align: center;
}

.stat-title {
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 18px;
  font-weight: bold;
  color: #409eff;
}

.check-btn-group {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: 8px;
}



.stat-list-scroll {
  overflow-x: auto;
  width: 100%;
  margin-bottom: 16px;
  padding: 8px 8px;
}

.stat-list-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  justify-content: flex-start;
}

.stat-card-inline {
  flex: 1;
  min-width: 80px;
  max-width: calc(100% / 13 - 8px);
  margin-bottom: 0;
  text-align: center;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.2s, transform 0.2s;
  cursor: pointer;
  border: 1px solid #f0f0f0;
  padding: 16px 0px;
}

.stat-card-hover:hover {
  box-shadow: 0 4px 16px rgba(64, 158, 255, 0.15);
  border-color: #409eff;
  transform: translateY(-4px) scale(1.03);
  background: #f6fbff;
}

.stat-content {
  text-align: center;
}

.stat-title {
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 18px;
  font-weight: bold;
  color: #409eff;
}

/* 日历样式优化 */
:deep(.el-calendar) {
  --el-calendar-header-height: 60px;
}

:deep(.el-calendar__header) {
  padding: 12px 20px;
  border-bottom: 1px solid #ebeef5;
  background-color: #fafafa;
}

:deep(.el-calendar__body) {
  padding: 12px 20px 35px 20px;
}

:deep(.el-calendar-table) {
  border-collapse: collapse;
}

:deep(.el-calendar-table td) {
  border: 1px solid #ebeef5;
  padding: 8px;
  height: 130px; /* 增加单元格高度 */
  vertical-align: top;
}

:deep(.el-calendar-table th) {
  border: 1px solid #ebeef5;
  padding: 12px 8px;
  background-color: #f5f7fa;
  font-weight: bold;
  text-align: center;
  font-size: 14px; /* 增加表头字体大小 */
}

:deep(.el-calendar-table .el-calendar-day) {
  height: 100%;
  padding: 4px;
}

/* 今天高亮 */
:deep(.el-calendar-table .is-today) {
  background-color: #f0f9ff;
  border: 2px solid #409eff;
}

/* 日历单元格样式 */
.calendar-cell {
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 6px; /* 增加内边距 */
  min-height: 90px; /* 增加最小高度 */
}

/* 日期数字样式 */
.date-number {
  font-size: 14px; /* 增加日期字体大小 */
  font-weight: bold;
  color: #303133;
  margin-bottom: 4px; /* 增加底部间距 */
  text-align: left;
  flex-shrink: 0;
}

/* 标签容器样式 */
.tags-container {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 4px;
  flex-shrink: 0;
  min-height: 20px;
}

/* 今天标签样式 */
.today-tag {
  font-weight: bold;
  background-color: #67c23a !important;
  border-color: #67c23a !important;
  color: white !important;
  font-size: 11px; /* 增加标签字体大小 */
  padding: 3px 8px; /* 增加内边距 */
}

/* 休息日标签样式 */
.rest-tag {
  font-size: 11px; /* 增加标签字体大小 */
  padding: 3px 8px; /* 增加内边距 */
  background-color: #f4f4f5 !important;
  border-color: #e9e9eb !important;
  color: #909399 !important;
}

/* 主要标签样式 */
.main-tag {
  font-size: 11px; /* 增加标签字体大小 */
  padding: 3px 8px; /* 增加内边距 */
  font-weight: 500;
}

/* 详细信息容器 */
.detail-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px; /* 增加间距 */
  font-size: 12px; /* 增加字体大小 */
  line-height: 1.4; /* 增加行高 */
  justify-content: center;
  min-height: 45px; /* 增加最小高度 */
}

/* 考勤详情样式 */
.attendance-detail {
  display: flex;
  flex-direction: column;
  gap: 4px; /* 增加间距 */
  align-items: center;
}

.time-line {
  display: flex;
  align-items: center;
  gap: 5px; /* 增加间距 */
  justify-content: center;
  width: 100%;
}

.time-label {
  color: #606266;
  font-weight: 500;
  font-size: 12px; /* 增加字体大小 */
  min-width: 35px; /* 增加最小宽度 */
}

.time-value {
  color: #303133;
  font-family: 'Courier New', monospace;
  font-weight: 500;
  font-size: 12px; /* 增加字体大小 */
}

.status-tag {
  font-size: 10px; /* 增加字体大小 */
  padding: 3px 6px; /* 增加内边距 */
}

/* 申请详情样式 */
.application-detail {
  display: flex;
  flex-direction: column;
  gap: 4px; /* 增加间距 */
  align-items: center;
}

.application-item {
  display: flex;
  justify-content: center;
  text-align: center;
  width: 100%;
}

.application-text {
  font-size: 12px; /* 增加字体大小 */
  color: #606266;
  background-color: #f8f9fa;
  padding: 4px 10px; /* 增加内边距 */
  border-radius: 4px;
  border: 1px solid #e9ecef;
  text-align: center;
  width: fit-content;
}

/* 简洁模式样式 */
.simple-detail {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px; /* 增加间距 */
  font-size: 11px; /* 增加字体大小 */
  line-height: 1.3; /* 增加行高 */
  justify-content: center;
  align-items: center;
  min-height: 45px; /* 增加最小高度 */
}

.simple-time {
  color: #303133;
  font-family: 'Courier New', monospace;
  font-weight: 500;
  background-color: #f0f9ff;
  padding: 4px 8px; /* 增加内边距 */
  border-radius: 4px;
  border: 1px solid #bae6fd;
  text-align: center;
  display: flex;
  align-items: center;
  gap: 4px; /* 增加间距 */
}

.simple-time-label {
  color: #606266;
  font-size: 11px; /* 增加字体大小 */
  font-weight: 500;
}

.simple-time-value {
  color: #303133;
  font-family: 'Courier New', monospace;
  font-weight: 500;
  font-size: 11px; /* 增加字体大小 */
}

.simple-overtime {
  color: #d97706;
  font-weight: 500;
  background-color: #fef3c7;
  padding: 4px 8px; /* 增加内边距 */
  border-radius: 4px;
  border: 1px solid #fbbf24;
  text-align: center;
  font-size: 11px; /* 增加字体大小 */
}

.simple-leave {
  color: #dc2626;
  font-weight: 500;
  background-color: #fee2e2;
  padding: 4px 8px; /* 增加内边距 */
  border-radius: 4px; /* 增加圆角 */
  border: 1px solid #fca5a5;
  text-align: center;
  font-size: 11px; /* 增加字体大小 */
}

.simple-leave-duration {
  color: #dc2626;
  font-size: 9px;
  opacity: 0.8;
  margin-left: 2px;
}

/* 标签样式优化 */
:deep(.el-tag) {
  margin: 0;
  font-size: 11px; /* 增加字体大小 */
  line-height: 1.3; /* 增加行高 */
  border-radius: 4px; /* 增加圆角 */
}

/* 考勤信息样式 */
.attendance-info {
  font-size: 12px; /* 增加字体大小 */
  line-height: 1.4; /* 增加行高 */
  margin-top: 4px;
}

.attendance-time {
  color: #606266;
  margin-bottom: 2px;
}

.attendance-status {
  display: inline-block;
  margin-left: 4px;
}

/* 半天考勤记录状态样式 */
.half-day-status {
  margin-top: 4px;
  display: flex;
  justify-content: center;
  width: 100%;
}

.half-day-tag {
  font-size: 11px; /* 增加字体大小 */
  padding: 3px 8px; /* 增加内边距 */
  border-radius: 4px; /* 增加圆角 */
}

.simple-half-day-status {
  margin-top: 3px; /* 增加顶部间距 */
  display: flex;
  justify-content: center;
  width: 100%;
}

.simple-half-day-text {
  font-size: 11px; /* 增加字体大小 */
  color: #606266;
  background-color: #f4f4f5;
  padding: 3px 8px; /* 增加内边距 */
  border-radius: 4px; /* 增加圆角 */
  border: 1px solid #e9e9eb;
  text-align: center;
}

/* 全屏状态样式 */
.full-day-status {
  display: flex;
  flex-direction: column;
  gap: 4px; /* 增加间距 */
  align-items: center;
  justify-content: center;
  min-height: 45px; /* 增加最小高度 */
}

.full-day-item {
  display: flex;
  justify-content: center;
  text-align: center;
  width: 100%;
  font-size: 12px; /* 增加字体大小 */
  color: #606266;
  background-color: #f4f4f5;
  padding: 4px 10px; /* 增加内边距 */
  border-radius: 4px; /* 增加圆角 */
  border: 1px solid #e9e9eb;
}

.full-day-text {
  font-weight: 500;
}

.business-trip {
  color: #409eff;
  background-color: #ecf5ff;
  border-color: #d9ecff;
}

.absent {
  color: #f56c6c;
  background-color: #fef0f0;
  border-color: #fbc4c4;
}

.leave {
  color: #e6a23c;
  background-color: #fdf6ec;
  border-color: #faecd8;
}

/* 简洁模式下的全屏状态样式 */
.simple-full-day {
  font-size: 11px; /* 增加字体大小 */
  color: #606266;
  background-color: #f4f4f5;
  padding: 4px 8px; /* 增加内边距 */
  border-radius: 4px; /* 增加圆角 */
  border: 1px solid #e9e9eb;
  text-align: center;
}

.simple-full-day.business-trip {
  color: #409eff;
  background-color: #ecf5ff;
  border-color: #d9ecff;
}

.simple-full-day.absent {
  color: #f56c6c;
  background-color: #fef0f0;
  border-color: #fbc4c4;
}

.simple-full-day.leave {
  color: #e6a23c;
  background-color: #fdf6ec;
  border-color: #faecd8;
}

/* 简洁模式状态样式 */
.simple-status {
  font-size: 10px; /* 增加字体大小 */
  color: #606266;
  background-color: #f4f4f5;
  padding: 2px 6px; /* 增加内边距 */
  border-radius: 3px; /* 增加圆角 */
  border: 1px solid #e9e9eb;
  margin-left: 4px; /* 增加左边距 */
}

/* 右上角标签样式 */
.top-right-tags {
  position: absolute;
  top: 6px; /* 调整位置 */
  right: 6px; /* 调整位置 */
  display: flex;
  gap: 3px; /* 增加间距 */
}

.today-tag {
  font-size: 11px; /* 增加字体大小 */
  padding: 3px 8px; /* 增加内边距 */
  border-radius: 4px; /* 增加圆角 */
}

.rest-tag {
  font-size: 11px; /* 增加字体大小 */
  padding: 3px 8px; /* 增加内边距 */
  border-radius: 4px; /* 增加圆角 */
}

/* 中间内容区域 */
.center-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 6px; /* 增加内边距 */
  margin-top: 25px; /* 为右上角标签留出更多空间 */
}

/* 全天状态样式 */
.full-day-status {
  display: flex;
  flex-direction: column;
  gap: 4px; /* 增加间距 */
  align-items: center;
  justify-content: center;
  min-height: 45px; /* 增加最小高度 */
}

.full-day-item {
  display: flex;
  justify-content: center;
  text-align: center;
  width: 100%;
  font-size: 12px; /* 增加字体大小 */
  color: #606266;
  background-color: #f4f4f5;
  padding: 5px 10px; /* 增加内边距 */
  border-radius: 4px; /* 增加圆角 */
  border: 1px solid #e9e9eb;
}

.full-day-text {
  font-weight: 500;
}

.business-trip {
  color: #409eff;
  background-color: #ecf5ff;
  border-color: #d9ecff;
}

.absent {
  color: #f56c6c;
  background-color: #fef0f0;
  border-color: #fbc4c4;
}

.leave {
  color: #e6a23c;
  background-color: #fdf6ec;
  border-color: #faecd8;
}

/* 申请信息样式 */
.overtime-text {
  color: #d97706;
  background-color: #fef3c7;
  border-color: #fbbf24;
}

.leave-text {
  color: #dc2626;
  background-color: #fee2e2;
  border-color: #fca5a5;
}

.leave-duration {
  color: #dc2626;
  font-size: 10px;
  opacity: 0.8;
  margin-left: 4px;
}

.business-trip-text {
  color: #409eff;
  background-color: #ecf5ff;
  border-color: #d9ecff;
}

/* 简洁模式下的全天状态样式 */
.simple-full-day {
  font-size: 11px; /* 增加字体大小 */
  color: #606266;
  background-color: #f4f4f5;
  padding: 4px 8px; /* 增加内边距 */
  border-radius: 4px; /* 增加圆角 */
  border: 1px solid #e9e9eb;
  text-align: center;
  margin-bottom: 4px; /* 增加底部间距 */
}

.simple-full-day.business-trip {
  color: #409eff;
  background-color: #ecf5ff;
  border-color: #d9ecff;
}

.simple-full-day.absent {
  color: #f56c6c;
  background-color: #fef0f0;
  border-color: #fbc4c4;
}

.simple-full-day.leave {
  color: #e6a23c;
  background-color: #fdf6ec;
  border-color: #faecd8;
}

.simple-full-day.overtime {
  color: #d97706;
  background-color: #fef3c7;
  border-color: #fbbf24;
}

/* 简洁模式状态样式 */
.simple-status {
  font-size: 10px; /* 增加字体大小 */
  color: #606266;
  background-color: #f4f4f5;
  padding: 2px 6px; /* 增加内边距 */
  border-radius: 3px; /* 增加圆角 */
  border: 1px solid #e9e9eb;
  margin-left: 4px; /* 增加左边距 */
}

/* 简洁模式考勤容器 */
.simple-attendance {
  display: flex;
  flex-direction: column;
  gap: 4px; /* 增加间距 */
  width: 100%;
}

/* 缺卡状态样式 */
.absent-status {
  color: #f56c6c !important;
  background-color: #fef0f0 !important;
  border-color: #fbc4c4 !important;
}

/* 状态样式类 */
.success-status {
  color: #67c23a !important;
  background-color: #f0f9ff !important;
  border-color: #b3d8ff !important;
}

.warning-status {
  color: #e6a23c !important;
  background-color: #fdf6ec !important;
  border-color: #f5dab1 !important;
}

.danger-status {
  color: #f56c6c !important;
  background-color: #fef0f0 !important;
  border-color: #fbc4c4 !important;
}

.info-status {
  color: #909399 !important;
  background-color: #f4f4f5 !important;
  border-color: #d3d4d6 !important;
}

/* 时间类型标签样式 */
.time-type-tag {
  margin-left: 6px;
  font-size: 10px;
  padding: 2px 6px;
}

/* 响应式布局 */
@media (max-width: 1200px) {
  .stat-card-inline {
    max-width: calc(100% / 7 - 8px);
  }
}

@media (max-width: 768px) {
  .stat-card-inline {
    max-width: calc(100% / 4 - 8px);
  }
}

@media (max-width: 480px) {
  .stat-card-inline {
    max-width: calc(100% / 2 - 8px);
  }
}
</style>